// 明亮主题样式

.theme-light {
  // 主色调
  --primary-color: #409EFF;
  --primary-light: #79bbff;
  --primary-dark: #337ecc;
  
  // 功能色
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  
  // 文本色
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #C0C4CC;
  --text-disabled: #C0C4CC;
  
  // 背景色
  --bg-color: #ffffff;
  --bg-color-page: #f5f7fa;
  --bg-color-overlay: rgba(255, 255, 255, 0.8);
  --bg-color-mask: rgba(0, 0, 0, 0.5);
  
  // 边框色
  --border-color: #DCDFE6;
  --border-color-light: #E4E7ED;
  --border-color-lighter: #EBEEF5;
  --border-color-extra-light: #F2F6FC;
  --border-color-dark: #D4D7DE;
  --border-color-darker: #CDD0D6;
  
  // 填充色
  --fill-color: #F0F2F5;
  --fill-color-light: #F5F7FA;
  --fill-color-lighter: #FAFAFA;
  --fill-color-extra-light: #FAFCFF;
  --fill-color-dark: #EBEDF0;
  --fill-color-darker: #E6E8EB;
  --fill-color-blank: #FFFFFF;
  
  // 阴影
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  
  // 特殊背景
  --header-bg: rgba(255, 255, 255, 0.95);
  --sidebar-bg: #ffffff;
  --footer-bg: #f8f9fa;
  
  // 代码高亮
  --code-bg: #f6f8fa;
  --code-color: #e83e8c;
  --pre-bg: #f8f9fa;
  --pre-color: #212529;
  
  // 链接色
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-light);
  --link-active-color: var(--primary-dark);
  
  // 表格色
  --table-header-bg: #fafafa;
  --table-row-hover-bg: #f5f7fa;
  --table-border-color: var(--border-color-lighter);
  
  // 表单色
  --input-bg: #ffffff;
  --input-border-color: var(--border-color);
  --input-focus-border-color: var(--primary-color);
  --input-placeholder-color: var(--text-placeholder);
  
  // 按钮色
  --button-default-bg: #ffffff;
  --button-default-border: var(--border-color);
  --button-default-color: var(--text-regular);
  --button-hover-bg: #f5f7fa;
  
  // 标签色
  --tag-bg: var(--fill-color-extra-light);
  --tag-color: var(--text-regular);
  --tag-border-color: var(--border-color-extra-light);
  
  // 徽章色
  --badge-bg: var(--danger-color);
  --badge-color: #ffffff;
  
  // 进度条色
  --progress-bg: var(--fill-color-light);
  --progress-color: var(--primary-color);
  
  // 滚动条色
  --scrollbar-track-color: var(--fill-color-light);
  --scrollbar-thumb-color: var(--border-color-darker);
  --scrollbar-thumb-hover-color: var(--border-color-dark);
  
  // 分割线色
  --divider-color: var(--border-color-lighter);
  
  // 选择色
  --selection-bg: var(--primary-color);
  --selection-color: #ffffff;
  
  // 焦点色
  --focus-outline-color: var(--primary-color);
  
  // 禁用色
  --disabled-bg: var(--fill-color-light);
  --disabled-color: var(--text-disabled);
  --disabled-border-color: var(--border-color-light);
}

// 明亮主题特定样式
.theme-light {
  color: var(--text-primary);
  background-color: var(--bg-color);
  
  // 滚动条
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 4px;
    
    &:hover {
      background: var(--scrollbar-thumb-hover-color);
    }
  }
  
  // 选择文本
  ::selection {
    background: var(--selection-bg);
    color: var(--selection-color);
  }
  
  ::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-color);
  }
  
  // 焦点样式
  :focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
  }
  
  // 链接样式
  a {
    color: var(--link-color);
    
    &:hover {
      color: var(--link-hover-color);
    }
    
    &:active {
      color: var(--link-active-color);
    }
  }
  
  // 代码样式
  code {
    background: var(--code-bg);
    color: var(--code-color);
  }
  
  pre {
    background: var(--pre-bg);
    color: var(--pre-color);
  }
  
  // 分割线样式
  hr {
    background: var(--divider-color);
  }
  
  // 表格样式
  .el-table {
    --el-table-header-bg-color: var(--table-header-bg);
    --el-table-row-hover-bg-color: var(--table-row-hover-bg);
    --el-table-border-color: var(--table-border-color);
  }
  
  // 输入框样式
  .el-input {
    --el-input-bg-color: var(--input-bg);
    --el-input-border-color: var(--input-border-color);
    --el-input-focus-border-color: var(--input-focus-border-color);
    --el-input-placeholder-color: var(--input-placeholder-color);
  }
  
  // 按钮样式
  .el-button {
    --el-button-bg-color: var(--button-default-bg);
    --el-button-border-color: var(--button-default-border);
    --el-button-text-color: var(--button-default-color);
    --el-button-hover-bg-color: var(--button-hover-bg);
  }
  
  // 卡片样式
  .el-card {
    --el-card-bg-color: var(--bg-color);
    --el-card-border-color: var(--border-color-lighter);
  }
  
  // 对话框样式
  .el-dialog {
    --el-dialog-bg-color: var(--bg-color);
    --el-dialog-box-shadow: var(--shadow-dark);
  }
  
  // 抽屉样式
  .el-drawer {
    --el-drawer-bg-color: var(--bg-color);
  }
  
  // 菜单样式
  .el-menu {
    --el-menu-bg-color: var(--bg-color);
    --el-menu-text-color: var(--text-regular);
    --el-menu-hover-bg-color: var(--fill-color-extra-light);
    --el-menu-active-color: var(--primary-color);
  }
  
  // 标签页样式
  .el-tabs {
    --el-tabs-header-bg-color: var(--bg-color);
  }
  
  // 分页样式
  .el-pagination {
    --el-pagination-bg-color: var(--bg-color);
    --el-pagination-button-bg-color: var(--fill-color-light);
    --el-pagination-hover-color: var(--primary-color);
  }
  
  // 加载样式
  .el-loading-mask {
    --el-loading-spinner-color: var(--primary-color);
  }
  
  // 消息样式
  .el-message {
    --el-message-bg-color: var(--bg-color);
    --el-message-border-color: var(--border-color-lighter);
  }
  
  // 通知样式
  .el-notification {
    --el-notification-bg-color: var(--bg-color);
    --el-notification-border-color: var(--border-color-lighter);
  }
  
  // 工具提示样式
  .el-tooltip__popper {
    --el-tooltip-bg-color: var(--text-primary);
    --el-tooltip-text-color: var(--bg-color);
  }
  
  // 气泡确认框样式
  .el-popconfirm {
    --el-popconfirm-bg-color: var(--bg-color);
    --el-popconfirm-border-color: var(--border-color-lighter);
  }
  
  // 日期选择器样式
  .el-date-picker {
    --el-datepicker-bg-color: var(--bg-color);
    --el-datepicker-border-color: var(--border-color);
  }
  
  // 时间选择器样式
  .el-time-picker {
    --el-time-picker-bg-color: var(--bg-color);
    --el-time-picker-border-color: var(--border-color);
  }
  
  // 选择器样式
  .el-select {
    --el-select-input-bg-color: var(--input-bg);
    --el-select-input-border-color: var(--input-border-color);
  }
  
  // 级联选择器样式
  .el-cascader {
    --el-cascader-bg-color: var(--bg-color);
    --el-cascader-border-color: var(--border-color);
  }
  
  // 穿梭框样式
  .el-transfer {
    --el-transfer-bg-color: var(--bg-color);
    --el-transfer-border-color: var(--border-color);
  }
  
  // 上传样式
  .el-upload {
    --el-upload-bg-color: var(--fill-color-extra-light);
    --el-upload-border-color: var(--border-color-lighter);
  }
  
  // 进度条样式
  .el-progress {
    --el-progress-bg-color: var(--progress-bg);
    --el-progress-color: var(--progress-color);
  }
  
  // 树形控件样式
  .el-tree {
    --el-tree-bg-color: var(--bg-color);
    --el-tree-text-color: var(--text-regular);
    --el-tree-hover-bg-color: var(--fill-color-extra-light);
  }
  
  // 骨架屏样式
  .el-skeleton {
    --el-skeleton-color: var(--fill-color);
    --el-skeleton-to-color: var(--fill-color-light);
  }
  
  // 空状态样式
  .el-empty {
    --el-empty-fill-color-0: var(--fill-color-extra-light);
    --el-empty-fill-color-1: var(--fill-color-light);
    --el-empty-fill-color-2: var(--fill-color);
  }
  
  // 结果样式
  .el-result {
    --el-result-title-color: var(--text-primary);
    --el-result-subtitle-color: var(--text-secondary);
  }
}
